<template>
  <div>
    <el-button type="primary" @click="status = 0, getorderlist()">未支付订单</el-button>
    <el-button type="primary" @click="status = 1, getorderlist()">已支付订单</el-button>
    <el-button type="primary" @click="status = 2, getorderlist()">已取消订单</el-button>
    <el-button type="primary" @click="status = 3, getorderlist()">已超时订单</el-button>
  </div>
  <div class="container" v-for="(item, key) in orderList" :key="key">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">订单号: {{ item.id }}</h5>
        <h6 class="card-subtitle mb-2 text-muted">医生姓名 {{ item.doctor_name }}</h6>
        <h6 class="card-subtitle mb-2 text-muted">医生部门 {{ item.doctor_department }}</h6>
        <h5 class="card-text">订单价格: {{ item.price }}</h5>
        <el-button type="primary" @click="">支付</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /* 确保容器的宽度不超过其父元素的宽度 */
  .container {
    max-width: 1200px; /* 可以根据需要调整这个值 */
    margin: 0 auto; /* 这将使容器在水平方向上居中 */
    padding: 20px; /* 根据需要添加一些内边距 */
  }

  /* 为卡片添加一些样式 */
  .card {
    margin-bottom: 20px; /* 为卡片之间添加一些间距 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加一些阴影效果 */
  }

  /* 确保卡片在容器内水平居中 */
  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center; /* 使卡片内容在水平方向上居中 */
  }

  /* 为按钮添加一些样式 */
  .el-button {
    margin-top: 20px; /* 为按钮添加一些上边距 */
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let orderList = ref([])

  let status = ref(0)

  const getorderlist = () => {
    axios.get(`http://127.0.0.1:8000/orders/orders/?status=${status.value}`, {
      headers: {
        Authorization: `Bearer ` + localStorage.getItem("access_token")
      }
    })
    .then((res) => {
      console.log(res)
      orderList.value = res.data.data
    })
  }

  onMounted(() => {
    getorderlist()
  })
  
</script>